<template>
    <!--视频播放-->
    <div class="love-simple-paint">
      <content-nav :title="result.title" :topic-code="result.topicCode"></content-nav>

        <!--正在播放视频-->
        <div class="container">
            <a-row>
                <!-- 视频播放区 -->
                <a-col :lg="16" :md="24">
                    <div class="video-playing-box">
                        <!--正在播放的视频-->
                        <video-playing-component :video-data="videoPlaying"/>
                        <div>评论区</div>
                    </div>
                </a-col>

                <!--视频列表-->
                <a-col :lg="24 - 16" :md="24">
                    <div class="video-list-box">
                        <div class="video-list-title">相关视频</div>
                        <!--视频列表子项-->
                        <video-item-component
                            v-for="(item, index) in videoList"
                            :key="item.id"
                            :index="index"
                            :videoData="item"
                            :id="id"
                        />
                    </div>
                </a-col>
            </a-row>
        </div>
    </div>
</template>

<script>
import VideoItemComponent from "../../components/SourseDataComponent/Video/VideoItemComponent";
import VideoPlayingComponent from "../../components/SourseDataComponent/Video/VideoPlayingComponent";
import {getResource} from "../../api/CommonApi";
import contentNav from "@/components/contentNav";

export default {
    name: "videoDetailPageTemplate",
    components:{
        VideoItemComponent,
        VideoPlayingComponent,
        contentNav
    },
    data(){
        return {
            result:{},
            videoListData:[],
            id:0
        }
    },

    created() {
        this.loadPlayingVideo();
    },
    methods:{
        loadPlayingVideo(){
            getResource(this.$route.params.id).then(res => {
                console.log("res : ", res);
                this.result = res.result || {};
                this.videoListData = res.result.item || [];
                this.id = res.result.id || 0;

                console.log("this.videoListData : ", this.videoListData);

            }).catch(err => {
                console.log(err);
            })
        },
    },
    computed:{
        videoPlaying(){
            let index = this.$route.query.item || 0;
            return this.videoListData[index];
        },
        videoList(){
            const list = [];
            let i = 0;
            for(let item of this.videoListData){
                list.push({
                    ...item,
                    id : this.id,
                    item : i++,
                    cover:item.cover || this.result.cover || '',
                    description: item.description || this.result.description || '没有更多简介了'
                })
            }
            console.log("list : ", list)
            return list;
        }
    },

}
</script>


<style lang="less" scoped>
//phone
@media (max-width: 576px) {

}

//pc
@media (min-width: 576px) {
    .guide-bar{
        //border:1px solid red;
        .guide-item{
            color:#738AE7;
            cursor: pointer;
        }
    }
    .content-box{
        //border:1px solid red;
        display: flex;
        justify-content: center;
        .video-playing-box{

            //border:1px solid red;

        }
        .video-list-box {
            //border:1px solid red;
            //width: 400px;
            //min-height: 200px;
            padding: 10px;

            .video-list-title {
                //border:1px solid red;
                font-size: 18px;
                font-family: Microsoft YaHei UI;
                font-weight: 400;
                color: #000000;
                line-height: 24px;
                padding: 5px 0;
                .line-ellipsis(1)
            }
        }

        .line-ellipsis(@line){
            //border:1px solid red;
            overflow : hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-line-clamp: @line;/*此为两行，设置行数*/
            -webkit-box-orient: vertical;/*子元素垂直排列*/
        }

    }
}
</style>
